22 - Modifier la transparence

Changer la transparence d'un élément

Il existe une propriété CSS permettant de changer le taux de transparence de tout un élément :

            

                /* Cet élément sera à moitié transparent (0 = complètement transparent, 1 = aucune transparence) */
                .element{
                    opacity: 0.5;
                }

            
        

Résultat :

Attention : tout l'élément ainsi que ses enfants sont tous impactés par ce changement d'opacité ! (on voit que le texte est également à moitié transparent)

Changer la transparence d'une couleur (de fond par exemple) uniquement

Si on souhaite appliquer une transparence seulement à la couleur de fond de l'élément par exemple, dans ce cas il faudra utiliser "rgba" sur le background-color de l'élément plutôt que la propriété "opacity" :

            

                /* La couleur de fond de cet élément sera à moitié transparent (Le 4ème chiffre gère la transparence) */
                .element{
                    background-color: rgba(0,255,0,0.5);
                }

            
        

Résultat :